<template>
	<view class="pageBox">
		<!--我的钱包-->
		
		<view class="headerBox">
			<view class="headerContent">
				<view class="headerNavbar">
					<text class="wlIcon-fanhui1 text-white" @click="goBack()"></text>
					<!-- <u-icon name="arrow-left" color="#ffffff" size="40" @click="goBack()"></u-icon> -->
					<view class="headerTitle">我的钱包</view>
				</view>
				
				<view class="numBox">
					<view class="num-item">
						<view class="value">{{data.money_freeze||0}}</view>
						<view class="title">
							余额冻结中
							<image src="/static/images/lock.png" class="lock-image"></image>
						</view>
					</view>
					
					<view class="line"></view>
					
					<view class="num-item">
						<view class="value">{{data.money||0}}</view>
						<view class="title">可提现余额</view>
					</view>
				</view>
				
				<view class="btn-box">
					<view class="wallet-btn" @tap="$Router.push('/pages/user/wallet/top-up')">充值</view>
					<view class="wallet-btn" @tap="$Router.push('/pages/user/wallet/withdraw')">提现</view>
					<view class="wallet-btn" @tap="exchangemoney()">转账</view>
				</view>
			</view>
		</view>
		
		
		<view class="title-box" @tap="showCalendar = true">
			<view class="date">{{ selDateText }}</view>
			<image src="/static/images/down.png" class="down-image"></image>
		</view>
		
		<view class="total-shouyi-box">
			<view class="margin-right-xl">今日收益<text class="margin-left-sm">¥{{day_inc||0}}</text></view>
			<view>累计收益<text class="margin-left-sm">¥{{inc||0}}</text></view>
		</view>
		
		
		<view class="header-box">
			<view class="header-item mr60" @click="changeTab(0)">
				<view :class="curTab=== 0 ? 'header-title-active ' : 'header-title'">全部</view>
				<view :class="curTab=== 0 ? 'header-line-active' : 'header-line'"></view>
			</view>
			<view class="header-item mr60" @click="changeTab(1)">
				<view :class="curTab=== 1 ? 'header-title-active' : 'header-title'">收入</view>
				<view :class="curTab=== 1 ? 'header-line-active' : 'header-line'"></view>
			</view>
			<view class="header-item" @click="changeTab(2)">
				<view :class="curTab=== 2 ? 'header-title-active' : 'header-title'">支出</view>
				<view :class="curTab=== 2 ? 'header-line-active' : 'header-line'"></view>
			</view>
		</view>
		
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<view class="flex flex-direction">
					<view class="memo">{{item.memo || ''}}</view>
					<view class="date">{{item.createtime || ''}}</view>
				</view>
				
				<view class="value" v-if="item.wallet > 0">{{item.wallet || ''}}</view>
				<view class="value red" v-if="item.wallet < 0">{{item.wallet || ''}}</view>
			</view>
		</view>
		
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
		<!-- 日期选择 -->
		<u-calendar v-model="showCalendar" 
		ref="uCalendar" 
		safeAreaInsetBottom 
		mode="range" 
		start-text="开始"
		end-text="结束" 
		active-bg-color="#9C3928" 
		active-color="#fff" 
		range-bg-color="#e5e2ff" 
		range-color="#7063d2"
		:customStyle="{ background: 'linear-gradient(90deg, #9c5559, #9C3928)', boxShadow: '0 7rpx 11rpx 2rpx rgba(214, 142, 152, 0.3)' }"
			@change="selDate"></u-calendar>
		
		
		<!-- 输码弹窗 -->
		<u-popup v-model="showInputModal" mode="center" :closeable="true" close-icon-pos="top-left" border-radius="20">
			<view class="modal-box u-flex-col u-col-center">
				<view class="modal-head u-flex-col u-col-center">
					<image class="modal-head-img" :src="$IMG_URL + '/imgs/modal/servece_head.png'" mode=""></image>
					<text class="modal-head-title">转账</text>
				</view>
				<input class="inp" type="number" v-model="money" placeholder="在此输入金额" placeholder-class="pl-inp" />
				<input class="inp" type="number" v-model="phone" placeholder="在此输入手机号" placeholder-class="pl-inp" style="margin-top:10rpx"/>
				<button class="u-reset-button post-btn" @tap="exchangemoneyMake()">确认</button>
			</view>
		</u-popup>	
			
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			curTab:0,
			data:{},
			day_inc:0, //今日收入
			inc:0, //总收入
			//日期选择
			showCalendar: false,
			propsDate: '', //日期参数
			selDateText: '',
			start_date: '',
			end_date: '',
			
			isEmpty: false,
			dataList:[],
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			
			showInputModal:false,
			money:'',
			phone:'',
		}
	},
	onLoad() {
		this.getToday();
		this.getData();
		this.getList();
	},
	onShow(){
		
	},
	// 触底加载更多
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getList();
		}
	},
	methods: {
		//  今日
		getToday() {
			let now = new Date();
			let dateText = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`;
			this.selDateText = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			this.start_date = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			this.end_date = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
			this.propsDate = `${dateText}-${dateText}`;
		},
		// 日期选择
		selDate(e) {
			console.log("go selDate", e);
			this.dataList = [];
			this.currentPage = 1;
			this.lastPage = 1;
			this.selDateText = `${e.startYear}.${e.startMonth}.${e.startDay}-${e.endYear}.${e.endMonth}.${e.endDay}`;
			let dateText = `${e.startYear}/${e.startMonth}/${e.startDay}-${e.endYear}/${e.endMonth}/${e.endDay}`;
			//this.selDateText = `${e.result}`;
			this.selDateText = `${e.startDate} ~ ${e.endDate}`;
			this.start_date = `${e.startDate}`;
			this.end_date = `${e.endDate}`;
			this.getList();
			this.$refs.uCalendar.init();
		},
		changeTab(type){
			this.curTab = type;
			this.currentPage = 1;
			this.lastPage = 1;
			this.dataList = [];
			this.getList();
		},
		goBack(){
			uni.navigateBack({
				delta:1
			})
		},
		getData(){
			let that = this;
			that.$httpbase('user.wallet', {}, '').then(res => {
				if (res.code === 1) {
					that.data = res.data;
				}
			});
		},
		// 钱包明细
		getList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$httpbase('user.walletlog', {
				wallet_type: 'money',
				type: that.curTab, //0 全部 1收入 2支出
				//date: that.selDateText,
				start_date: that.start_date,
				end_date: that.end_date,
				page: that.currentPage
			}).then(res => {
				if (res.code === 1) {
					that.dataList = [...that.dataList, ...res.data.data];
					that.day_inc = res.data.day_inc;
					that.inc = res.data.inc;
		
					that.isEmpty = !that.dataList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' :
						'nomore';
				}
			});
		},
		exchangemoney(){
			this.showInputModal = true;
			this.money = '';
			this.phone = '';
		},
		exchangemoneyMake(){
			let that = this;
			if(!this.money){
				return that.$u.toast('转账金额不能为空');
			}
			
			if(!this.phone){
				return that.$u.toast('转账手机号不能为空');
			}
			
			that.$httpbase('user.exchangemoney', {
				money: this.money,
				mobile: this.phone,
			}).then(res => {
				if (res.code === 1) {
					this.showInputModal = false;
					that.$u.toast('转账成功');
					
					this.lastPage = 1;
					this.dataList = [];
					this.getData();
					this.getList();
				}
			});
		}
	}
}
</script>


<style>
page{
	background-color:  #ffffff !important;	
}
</style>


<style scoped lang="scss">
.headerBox{
	
	.headerContent{
		width: 750rpx;
		padding-bottom: 40rpx;
		background: #9C3928;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		padding-top:115rpx;
	}
	
	.headerNavbar{
		display: flex;
		padding-left: 33rpx;
	}
	
	.headerTitle{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		padding-left: 246rpx;
	}
	
	.headerBody{
		width: 702rpx;
		height: 336rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 48rpx;
		margin-left: 24rpx;
		display: flex;
		justify-content: flex-start;
		padding: 31rpx 32rpx;
		flex-direction: column;
	}
	
	.numBox{
		margin-top: 58rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		justify-content: space-between;
		padding: 0rpx 80rpx;
	}
	
	.num-item{
		display: flex;
		flex-direction: column;
	}
	
	.value{
		font-size: 64rpx;
		font-family: Roboto-Medium, Roboto;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 75rpx;
	}
	
	.title{
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33rpx;
		margin-top: 12rpx;
		display: flex;
		align-items: center;
	}
	
	.line{
		width: 1rpx;
		height: 110rpx;
		background-color: rgba(255,255,255,0.41);
	}
	
	.btn-box{
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 56rpx;
	}
	
	.wallet-btn{
		width: 200rpx;
		height: 72rpx;
		background: #FFFFFF;
		border-radius: 94rpx 94rpx 94rpx 94rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #9C3928;
		line-height: 38rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.lock-image{
		width: 32rpx;
		height: 32rpx;
		margin-left: 8rpx;
	}
	
}	


.title-box{
	padding: 28rpx 30rpx 10rpx 30rpx;
	display: flex;
	align-items: center;
	
	.date{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 42rpx;
	}
	
	.down-image{
		width: 28rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
}

.total-shouyi-box{
	display: flex;
	align-items: center;
	padding-left: 30rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 33rpx;
	border-bottom: 2rpx solid #EBEBEB;
	padding-bottom: 46rpx;
}


.header-box{
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 2rpx solid #EBEBEB;
	margin: 18rpx 30rpx 0rpx 30rpx;
	
	.header-item{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	
	.header-title{
		font-size: 34rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #616367;
		line-height: 32rpx;
	}
	
	.header-title-active{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #9C3928;
		line-height: 32rpx;
	}
	
	.header-line{
		width: 40rpx;
		height: 6rpx;
		background: #ffffff;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		opacity: 1;
		margin-top: 24rpx;
	}
	
	.header-line-active{
		width: 40rpx;
		height: 6rpx;
		background: #9C3928;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		opacity: 1;
		margin-top: 24rpx;
	}
	
	.mr60{
		margin-right: 180rpx;
	}
}

.list{
	padding: 0rpx 30rpx;
	
	.list-item{
		padding:18rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #EBEBEB;
	}
	
	.memo{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 40rpx;
	}
	
	.date{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #9A9A9A;
		line-height: 30rpx;
		margin-top: 10rpx;
	}
	
	.value{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 40rpx;
	}
	
	.red{
		color: #9C3728 !important;
	}
}

// 输码弹窗
.modal-box {
	background: #fff;
	width: 610rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	.modal-head {
		width: 100%;
		.modal-head-img {
			width: 100%;
			height: 213rpx;
		}
		.modal-head-title {
			font-size: 35rpx;

			font-weight: bold;
			color: #343434;
			line-height: 42rpx;
		}
	}
	.inp {
		width: 501rpx;
		height: 78rpx;
		border: 1rpx solid #e5e5e5;
		margin: 60rpx auto 40rpx;
		font-size: 28rpx;

		font-weight: 400;
		color: #6d5028;
		padding-left: 20rpx;
		.pl-inp {
			color: #9a9a9a;
		}
	}
	.post-btn {
		width: 492rpx;
		line-height: 70rpx;
		// background: linear-gradient(90deg, #2eae9c, #6cc29f);
		// box-shadow: 0px 7rpx 6rpx 0px rgba(#6cc29f, 0.22);
		
		background: linear-gradient(
		  90deg,
		  rgba(233, 181, 97, 1),
		  rgba(238, 204, 138, 1)
		);
		box-shadow: 0px 7rpx 6rpx 0px rgba(#eecc8a, 0.22);
		border-radius: 35rpx;
		font-size: 28rpx;

		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		padding: 0;
		margin-bottom: 60rpx;
	}
}

</style>